<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="navbar">
      <div class="nav-content">
        <div class="nav-left">
          <div class="logo">
            <el-icon class="logo-icon"><Calendar /></el-icon>
            <span class="logo-text">小蝴蝶</span>
          </div>
        </div>
        <!-- 移动端菜单按钮 -->
        <div class="mobile-menu-btn" @click="toggleMobileMenu">
          <el-icon :size="24"><Menu /></el-icon>
        </div>
        <!-- 桌面端导航 -->
        <div class="nav-right desktop-nav">
          <div 
            v-for="(item, index) in navItems" 
            :key="index"
            class="nav-item"
            :class="{ active: activeName === item.name }"
            @click="handleNavSelect({ name: item.name })"
          >
            <el-icon class="nav-icon"><component :is="item.icon" /></el-icon>
            <span class="nav-text">{{ item.label }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端导航菜单 -->
    <div class="mobile-nav" :class="{ 'mobile-nav-active': isMobileMenuOpen }">
      <div class="mobile-nav-content">
        <div 
          v-for="(item, index) in navItems" 
          :key="index"
          class="mobile-nav-item"
          :class="{ active: activeName === item.name }"
          @click="handleMobileNavSelect(item.name)"
        >
          <el-icon class="mobile-nav-icon"><component :is="item.icon" /></el-icon>
          <span class="mobile-nav-text">{{ item.label }}</span>
        </div>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="page-content">
      <!-- 标语和时间显示区域 -->
      <div class="header-container">
        <div class="header-content">
          <div class="motto-section">
            <span class="motto-text">临渊羡鱼不如退而结网</span>
          </div>
          <div class="time-section">
            <el-icon class="time-icon"><Timer /></el-icon>
            <div class="time-text">
              <span class="time-label">今日剩余自由时间</span>
              <div class="time-value-wrapper">
                <span class="time-value">{{ remainingFreeTime }}</span>
                <span class="time-unit">分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Calendar, HomeFilled, List, PieChart, Timer, Monitor, Menu,AlarmClock, Document, Files } from '@element-plus/icons-vue'
import emitter from '@/utils/eventBus'

import StatisticsPage from '@/pages/admin/statistics.vue'
import ReversePage from '@/pages/admin/reverse.vue'
import PagePage from '@/pages/admin/page.vue'
import MobilePage from '@/pages/admin/mobilePage.vue'
import HabitPage from '@/pages/admin/habit.vue'
import TestPage from '@/pages/admin/test.vue'
import CardView from '@/pages/admin/views/card.vue'
import DocumentParser from '@/pages/admin/DocumentParser.vue'
import BadHabits from '@/components/habits/BadHabits.vue'
import Skill from '@/components/habits/Skills.vue'
import KnowledgeIndex from '@/pages/admin/knowledge/index.vue'
import * as scheduleApi from '@/api/schedule'



// 导航项配置
const navItems = [
  { name: 'home', label: '首页', icon: 'HomeFilled' },
  { name: 'four', label: '日程简记', icon: 'List' },
  { name: 'habit', label: '习惯记录', icon: 'AlarmClock' },
  { name: 'card', label: '卡片管理', icon: 'Document' },
  { name: 'third', label: '逆向日程表', icon: 'Timer' },
  // { name: 'document-parser', label: '文档解析', icon: 'Files' },
  { name: 'skill', label: '任务管理', icon: 'Monitor' },
  // { name: 'knowledge', label: '知识图谱', icon: 'Files' },
  { name: 'second', label: '统计图', icon: 'PieChart' },
  // { name: 'test', label: '测试页面', icon: 'Monitor' },
  { name: 'first', label: '日程记录', icon: 'List' }
]

// 导航状态与组件映射
const activeName = ref('home')
const componentMap = {
  first: PagePage,
  second: StatisticsPage,
  third: ReversePage,
  four: MobilePage,
  test: TestPage,
  habit: HabitPage,
  skill: Skill,
  card: CardView,
  'document-parser': DocumentParser,
  knowledge: KnowledgeIndex,
  home: BadHabits,
}
const currentComponent = computed(() => componentMap[activeName.value])
const remainingFreeTime = ref(0) // 默认120分钟

// 移动端菜单状态
const isMobileMenuOpen = ref(false)

// 切换移动端菜单
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

// 移动端导航选择
const handleMobileNavSelect = (name) => {
  activeName.value = name
  isMobileMenuOpen.value = false
}

// 导航点击事件
const handleNavSelect = (tab) => {
  activeName.value = tab.name
}

// 获取详情数据
const fetchDetail = async () => {
  try {
    const res = await scheduleApi.getDetail()
    if (res.data.success) {
      const data = res.data.data
      remainingFreeTime.value = data.totalReward || 0

    } else {
      ElMessage.warning(res.data.message || '获取数据失败')
    }
  } catch (error) {
    console.error('Fetch Detail Error:', error)
    ElMessage.error('获取数据失败')
  }
}

// 监听数据更新事件
const handleDataUpdate = () => {
  fetchDetail()
}

onMounted(() => {
  fetchDetail()
  emitter.on('refreshHeader', handleDataUpdate)
})

onUnmounted(() => {
  emitter.off('refreshHeader', handleDataUpdate)
})

</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.nav-content {
  max-width: 1400px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.nav-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.logo-icon {
  font-size: 24px;
  color: #409eff;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  background: linear-gradient(45deg, #409eff, #36cfc9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
}

.nav-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.nav-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.nav-icon {
  font-size: 18px;
}

.nav-text {
  font-size: 14px;
  font-weight: 500;
}

.page-content {
  padding-top: 84px;
  min-height: calc(100vh - 64px);
  padding-left: 24px;
  padding-right: 24px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
  display: none;
  cursor: pointer;
  padding: 8px;
  color: #606266;
  z-index: 1001;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  color: #409eff;
}

/* 移动端导航菜单 */
.mobile-nav {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.mobile-nav-active {
  transform: translateX(0);
}

.mobile-nav-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}

.mobile-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #606266;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mobile-nav-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
  transform: translateX(4px);
}

.mobile-nav-item.active {
  background-color: #ecf5ff;
  color: #409eff;
}

.mobile-nav-icon {
  font-size: 20px;
}

.mobile-nav-text {
  font-size: 16px;
  font-weight: 500;
}

/* 响应式设计 */
@media screen and (max-width: 768px) {
  .nav-content {
    padding: 0 16px;
  }

  .desktop-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-content {
    padding: 16px;
    padding-top: 84px;
  }

  .logo-text {
    display: none;
  }
}

/* 添加遮罩层 */
.mobile-nav::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.mobile-nav-active::before {
  opacity: 1;
  pointer-events: auto;
}

/* 防止内容滚动 */
.mobile-nav-active {
  position: fixed;
  overflow: hidden;
}

/* 移除旧的标语和时间显示样式 */
.motto-container,
.free-time-display {
  display: none;
}

/* 新的整合样式 */
.header-container {
  margin-bottom: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

.motto-section {
  flex: 1;
  padding-right: 24px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.motto-text {
  font-size: 18px;
  font-weight: 500;
  color: #2c3e50;
  letter-spacing: 1px;
  background: linear-gradient(45deg, #2c3e50, #3498db);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.time-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 24px;
}

.time-icon {
  font-size: 28px;
  color: #3498db;
}

.time-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-label {
  font-size: 14px;
  color: #606266;
}

.time-value-wrapper {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.time-value {
  font-size: 28px;
  font-weight: bold;
  color: #2c3e50;
  line-height: 1;
}

.time-unit {
  font-size: 14px;
  color: #909399;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .motto-section {
    padding-right: 0;
    padding-bottom: 16px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .time-section {
    padding-left: 0;
    justify-content: center;
  }

  .motto-text {
    font-size: 16px;
  }

  .time-icon {
    font-size: 24px;
  }

  .time-value {
    font-size: 24px;
  }
}
</style>
